<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/static/lib/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="${path}/static/lib/layui/css/layui.css" media="all">
</head>
<body>
	<form class="layui-form layui-form-pane" id="update_form"  method="post" onsubmit="return false">
	
	  <input type="hidden" class="layui-input" name="id" value="${product.id}" /> 
	  
	 
	  <div class="layui-form-item">
	    <label class="layui-form-label">分类</label>
	    <div class="layui-input-inline">
	      <input name="categoryId" id="categoryId" value="${product.categoryId}" class="layui-input" type="text" placeholder="请输入类别号" autocomplete="off">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品名</label>
	    <div class="layui-input-inline">
	      <input name="name" id="name" value="${product.name}" class="layui-input" type="text" placeholder="请输入商品名" autocomplete="off">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品副标题</label>
	    <div class="layui-input-inline">
	      <input name="subtitle" class="layui-input" value="${product.subtitle}" type="text" placeholder="请输入商品副标题" autocomplete="off" lay-verify="required">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品分类</label>
	    <div class="layui-input-inline">
	      <select id="topCategoryId"  lay-filter="topCategoryFilter">
	        <option value="">请选择一级分类</option>
	      </select>
	    </div>
	    <div class="layui-input-inline">
	      <select id="secondCategoryId" name="categoryId">
	        <option value="">请选择二级分类</option>
	      </select>
	    </div>
	  </div>
	  
	 <div class="layui-form-item" pane="">
  	     <label class="layui-form-label" style="padding-top:120px;">商品主图</label>
	  	  <div class="layui-upload layui-input-block">
			  <div class="layui-upload-list">
			  	<input type="hidden" name="mainImage" id="mainImgInputId"> 
			    <img class="layui-upload-img" id="mainImgId" width="200px" height="200px">
			    <p id="demoText"></p>
			    <br/>
			  <button type="button" class="layui-btn" id="uploadBtnId">上传图片</button>
			  </div>
		  </div> 
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">图片地址</label>
	    <div class="layui-input-inline">
	      <input name="subImages" class="layui-input" value="${product.subImages}" type="text" placeholder="请输入图片地址" autocomplete="off">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">价格</label>
	    <div class="layui-input-inline">
	      <input name="price" id="price" value="${product.price}" class="layui-input" type="text" placeholder="请输入商品价格" autocomplete="off">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">库存</label>
	    <div class="layui-input-inline">
	      <input name="stock" id="stock" value="${product.stock}" class="layui-input" type="text" placeholder="请输入库存" autocomplete="off">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
		    <label class="layui-form-label">商品状态</label>
		    <div class="layui-input-block">
		    	<c:if test="${product.status=='1'}">
			      <input type="radio" name="status" value="1" title="在售" checked="">
			      <input type="radio" name="status" value="2" title="下架">
			      <input type="radio" name="status" value="3" title="删除">
			    </c:if>
			    <c:if test="${product.status=='2'}">
			      <input type="radio" name="status" value="1" title="在售">
			      <input type="radio" name="status" value="2" title="下架" checked="">
			      <input type="radio" name="status" value="3" title="删除">
			    </c:if>
			    <c:if test="${product.status=='3'}">
			      <input type="radio" name="status" value="1" title="在售">
			      <input type="radio" name="status" value="2" title="下架">
			      <input type="radio" name="status" value="3" title="删除" checked="">
			    </c:if>
		    </div>
	   </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">创建时间</label>
	    <div class="layui-input-inline">
	      <fmt:formatDate value="${product.createTime}" pattern="yyyy-MM-dd HH:mm:ss" var="createTime"/>
	      <input name="createTime" id="createTime" value="${createTime}" class="layui-input" type="text" disabled="disabled"  placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off">
	    </div>
	  </div>
	  
<!-- 	  <div class="layui-form-item"> -->
<!-- 	    <label class="layui-form-label">更新时间</label> -->
<!-- 	    <div class="layui-input-inline"> -->
<%-- 	      <fmt:formatDate value="${product.updateTime}" pattern="yyyy-MM-dd HH:mm:ss" var="updateTime"/> --%>
<!-- 	      <input type="text" name="updateTime" id="updateTime" autocomplete="off" class="layui-input" placeholder="yyyy-MM-dd HH:mm:ss"> -->
<!-- 	    </div> -->
<!-- 	  </div> -->
	  
	  <div class="layui-form-item" pane="">
	    <label class="layui-form-label" style="padding-top:40px;">商品详情</label>
	    <div class="layui-input-block">
	       <textarea name="detail" class="layui-textarea"  placeholder="请输入内容">${product.detail}</textarea>
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <button class="layui-btn" onclick="submitUpdate()">编辑</button>
	  </div>
	</form>
	
	<script src="${path}/static/lib/jquery-1.11.3.js"></script>
	<script src="${path}/static/lib/layui/layui.js"></script>
	<script src="${path}/static/lib/mylayer.js"></script>
	<script src="${path}/static/lib/myUtil.js"></script>
	<script src="${path}/static/lib/kindeditor/kindeditor.js"></script>
	<script src="${path}/static/lib/kindeditor/lang/zh_CN.js"></script>
	
	<script>
	var form;
	layui.use(['form','laydate','upload','layer'], function(){
		  form = layui.form;
		  var layer = layui.layer;
		  var laydate = layui.laydate;
		  var upload = layui.upload;
		  
		  form.render('select'); //刷新select选择框渲染
		  
		  form.on('select(topCategoryFilter)', function(data){
			  console.log(data.elem); //得到select原始DOM对象
			  console.log(data.value); //得到被选中的值
			  
			  $.ajax({
					url: "${path}/category/selectSecondCategory.action",
					type: "post",
					dataType: "json",
					data: {"topCategoryId":data.value},
					success: function(jsonObj) {
						console.log(jsonObj);
						$("#secondCategoryId option:gt(0)").remove();
						// var data = jsonObj.data;
						$(jsonObj.data).each(function(){
							var html = "<option value='"+this.id+"'>"+this.name+"</option>";
							$("#secondCategoryId").append(html);
						});
						
						form.render('select'); //刷新select选择框渲染
					}
			  });
			}); 
		  
		  laydate.render({
			    elem: '#createTime'
			    ,type: 'datetime'
			    ,trigger: 'click'
			    ,theme: 'molv'
		  });
		  
		  laydate.render({
			    elem: '#updateTime'
			    ,type: 'datetime'
			    ,trigger: 'click'
			    ,theme: 'molv'
		  });
		  
			//普通图片上传
		    var uploadInst = upload.render({
		      elem: '#uploadBtnId'
		      ,url: '${path}/upload/uploadImge.action'
		      ,before: function(obj){
		        //预读本地文件示例，不支持ie8
		        obj.preview(function(index, file, result){
		          $('#mainImgId').attr('src', result); //图片链接（base64）
		        });
		      }
		      ,done: function(res){
		         if(res.code == myUtil.SUCCESS){
		           //上传成功
		           $('#mainImgInputId').val(res.data);
		         }
		      }
		      ,error: function(){
		        //演示失败状态，并实现重传
		        var demoText = $('#demoText');
		        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		        demoText.find('.demo-reload').on('click', function(){
		          uploadInst.upload();
		        });
		      }
		    });
	});
	
	
	$(function(){
		// 加载一级分类
		$.ajax({
			url:"${path}/category/selectTopCategory.action",
			type: "post",
			dataType: "json",
			success:function(jsonObj){
				console.log(jsonObj);
				$(jsonObj.data).each(function(){
					var html = "<option value='"+this.id+"'>"+this.name+"</option>";
					$("#topCategoryId").append(html);
				});
				
				form.render('select'); //刷新select选择框渲染
			},
		});
	});
	

	
		function submitUpdate(){
			 $.ajax({
	    		  url:"${path}/product/updateById.action",
	    		  data:$("#update_form").serialize(),
	    		  dataType:"json",
	    		  type:"post",
	    		  success:function(jsonObj){
	    			  if(jsonObj.code == myUtil.SUCCESS){
	    				  mylayer.successMsg(jsonObj.msg);
	    				  //当你在iframe页面关闭自身时
						  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						  setTimeout(function(){
								parent.layer.close(index); //再执行关闭 
								// 刷新父页面
								window.parent.location.reload();
						  },1000);
	    			  } else {
	    				  mylayer.errorMsg(jsonObj.msg);
	    			  }
	    		  }
			});
		}
		
		var myKindEditor ;
        KindEditor.ready(function(K) {
            var kingEditorParams = {
                 //指定上传文件参数名称
                 filePostName  : "file",
                 //指定上传文件请求的url。
                 uploadJson : '${path}/product/uploadImgByEditor.action',
                 //上传类型，分别为image、flash、media、file
                 dir : "image", 
                 afterBlur: function () { this.sync(); }
           }
           var editor = K.editor(kingEditorParams);
           
          //富文本编辑器
          myKindEditor = KindEditor.create('#update_form[name=detail]', kingEditorParams);
        });
	</script>
</body>
</html>